<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }


        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }


        .screen {
            width: 500px;
            height: 200px;
            /*overflow: hidden;*/
            position: relative;
        }


        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }


        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 500px;
        }


        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }


        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }


        .all ol li.current {
            background: yellow;
        }




        #arr {
            display: none;
        }


        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }


        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
    <script src="./fade.js"></script>
</head>

<body>
    <div class="all">
        <div class="screen">
            <ul>
                <li><img src="images/laugh01.gif" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <script>
        // 需求：动态生成页码：放到ol中
        const images = ["images/laugh01.gif", "images/laugh02.gif",
            "images/laugh03.gif", "images/laugh04.gif",
            "images/laugh05.gif", "images/laugh43.gif"]


        window.onload = function () {

            // 1. 获取父元素：ol
            let ol = document.querySelector('.all ol')
            // 2. 知道数组的长度：循环实现效果 
            for (let i = 0; i < images.length; i++) {
                let li = document.createElement('li')
                li.innerText = i + 1
                // 3. 动态生成li：li要做事件，document.createElement()
                ol.appendChild(li)
                ol.firstElementChild.classList.add('current')
                // 需求：给所有页码增加点击事件 







                // 事件处理
                li.onclick = function () {
                    // 1. 把原来的页码干掉选中效果
                    if (index == i) {
                        return
                    }
                    ol.children[index].classList.remove('current')
                    // 2. 修改的index的值：就是i
                    index = i

                    // 3. 动画效果换图：先淡出，后切换，再淡入，最后换页码
                    let img = all.querySelector('img')
                    fadeTo(img, 1, function () {
                        img.src = images[index]
                        fadeTO(img, 1)
                        li.classList.add('current')
                    })

                    // 4. 将li添加到ol中
                }


            }
            // 需求：鼠标移入，显示箭头；鼠标移出隐藏

            // 1. 定时器：自动触发rightClick
            let timeId = setInterval(myClick, 3000)
            // 需求：自动轮播，鼠标移入停止，移出继续
            // 1. 获取大盒子：all
            let all = document.querySelector('.all')
            // * 操作的是#arr
            let arr = all.lastElementChild
            // 2. 鼠标移入事件
            all.onmouseover = function () {
                arr.style.display = 'block'
                // 2. 修改鼠标移入事件：结束自动轮播
               clearInterval(timeId)
                
            }// 3. 鼠标移出事件
            all.onmouseout = function () {
                
                arr.style.display = ''
                // 3. 修改鼠标移出事件：继续自动轮播
                timeId = setInterval(myClick, 3000)
            }
            // 需求：点击向右的箭头，实现图片的淡入与淡出

            
            // 1. 引入js文件：fade.js
            // 2. 定义一个变量：记录当前被现实的图片的下标，默认是第一张：index = 0
            let index = 0
            arr.lastElementChild.onclick = myClick
            // 3. 给向右的按钮做点击事件：有名函数  onclick = function(){}  onclick = myClick
            function myClick() {
                // 3.1 先将当前index（当前图片）对应的页面的样式：类干掉
                ol.children[index].classList.remove('current')
                // 3.2 index+1代表下一张图片
                index++
                // 3.3 安全：index的值 == 数组的长度：index = 0
                if (index == images.length) {
                    index = 0
                }
                // 3.4 动画：先淡出0.4，然后改图片，淡入到1，给新的页码加上类
                let img = all.querySelector('img')
                fadeTo(img, 0.4, function () {
                    img.src = images[index]
                    fadeTo(img, 1,function(){
                        arr.lastElementChild.onclick = myClick
                    })
                    ol.children[index].classList.add('current')
                })



            }
            // 需求：点击向左按钮，切换到左边的图片


            // 1. 给向左的按钮添加点击事件：#left
            // let index = 0
            arr.firstElementChild.onclick = leftmyClick
            // 3. 给向右的按钮做点击事件：有名函数  onclick = function(){}  onclick = myClick
            function leftmyClick() {
                // 3.1 先将当前index（当前图片）对应的页面的样式：类干掉
                ol.children[index].classList.remove('current')
                // 3.2 index--代表上一张图片
                index--
                // 3.3 安全：index的值 == 数组的长度：index = 0
                if (index < 0) index = images.length - 1
                // 3.4 动画：先淡出0.4，然后改图片，淡入到1，给新的页码加上类
                let img = all.querySelector('img')
                fadeTo(img, 0.4, function () {
                    img.src = images[index]
                    fadeTo(img, 1)
                    ol.children[index].classList.add('current')
                })



            }



        }

    </script>
</body>

</html>